import React, {Component} from 'react';
import {connect} from 'dva';
import {Row, Col, Input, Checkbox, message, Button, Icon} from 'antd';
import request from '../../utils/request';
import config from '../../../config';
import md5 from 'blueimp-md5';
import PublicService from '../../services/PublicService';
import styles from './logo.less';

class Logo extends Component {

  state = {
    enter: false,
    user: '',
    pwd: '',
    code: '',
    codeImg: '',
    autoLogin: false,
    loading: false,
    codeUrl: '/hh-management-web/hehui/login/getSignCode',
    inputType: 'password'
  };

  componentDidMount () {
    request({url: '/hh-management-web/hehui/stock/findAllPackingTypes',method:'GET'})
    let t = this;
    t.refreshCode();
    PublicService.clearCookie('nickName');
    // 获取自动登录ID
    let autoLoginId = PublicService.getCookie('rememberMeId');
    // 自动登录ID存在 则自动登录
    if (autoLoginId) {
      t.setState({
        autoLogin: true,
      });
      request({
        url: '/hh-management-web/hehui/login/login',
        method: 'POST',
        data: {
          rememberMeId: autoLoginId,
          rememberMe: true
        }
      }).then(
        data => {
          console.log(data, 'data');
          t.checkLogin(data);
        }
      );
    }
  }


  // input change事件
  getUserInfo (inputIndex, e) {
    let t = this;
    if (inputIndex === 'autoLogin') {
      t.setState({
        autoLogin: e.target.checked
      })
    } else {
      t.setState({
        [inputIndex]: e.target.value.trim()
      });
    }
  }

  login = () => {
    this.props.history.push('/GasStationCall');
  }

  // 登录按钮
  // login () {
  //   let t = this;
  //   if (typeof(Storage) !== "undefined") {
  //     sessionStorage.SZHJ = 'menu-list';
  //     sessionStorage.JSZX = 'menu-list';
  //     sessionStorage.XFGC = 'menu-list';
  //   } else {
  //     message.warning('您的浏览器版本过低');
  //   }
  //   // 判断输入框是否为空
  //   if (!t.state.user) {
  //     message.warning('用户名不能为空');
  //     return;
  //   }
  //   if (!t.state.pwd) {
  //     message.warning('密码不能为空');
  //     return;
  //   }
  //   if (!t.state.code) {
  //     message.warning('验证码不能为空');
  //     return;
  //   }
  //   // PublicService.fullScreen(document.documentElement);
  //   t.setState({
  //     loading: true
  //   });
  //   let params = {
  //     password: md5(t.state.pwd),
  //     userName: t.state.user,
  //     v_verifyCode: t.state.code,
  //     rememberMe: t.state.autoLogin
  //   };
  //   request({url: '/hh-management-web/hehui/login/login', method: 'POST', data:params}).then(
  //     (data) => {
  //       console.log(document.cookie, '接口后cookie');
  //       t.checkLogin(data);
  //     }
  //   ).catch(() => {
  //     message.warning('登录失败');
  //     t.setState({
  //       loading: false
  //     });
  //   })
  // }

  // 判断是否登录成功
  checkLogin (data) {
    let t = this;
    t.setState({
      loading: false
    });
    t.refreshCode();
    if (data.rc === 1) {
      document.exitFullscreen ? document.exitFullscreen() :
        document.mozCancelFullScreen ? document.mozCancelFullScreen() :
          document.webkitExitFullscreen ? document.webkitExitFullscreen() : '';
      message.warning(data.err);
    } else {
      // 保存用户登录信息
      // t.props.dispatch({type: 'login/saveUser', payload: {user: data.ret}});
      PublicService.setCookie('userId', data.ret.id);
      PublicService.setCookie('userName', data.ret.userName);
      PublicService.setCookie('nickName', data.ret.name);
      message.success('登录成功');
     
      //根据用户id获取相应菜单
     
        t.props.history.push({pathname: 'wasteSludge'});
    
      



    }
  }

  // 刷新验证码
  refreshCode () {
    let t = this;
    t.setState({
      codeUrl: `${t.state.codeUrl}?t=${new Date().getTime()}`
    });
  }

  // 显示密码
  pwdShow () {
    let t = this;
    t.setState({
      inputType: t.state.inputType.length === 0 ? 'password' : ''
    })
  }

  // 键盘事件
  keyUp(e){
    let t = this;
    let code = e.charCode || e.keyCode;  //取出按键信息中的按键代码(大部分浏览器通过keyCode属性获取按键代码，但少部分浏览器使用的却是charCode)
    if (code === 13) {
      t.login();
    }
  }


  render () {
    let t = this;
    let { loading } = t.state;
    return (
      <div className={styles["bg"]} onKeyUp={(e)=>t.keyUp(e)}>
        <div className={styles['wp-content']}>
          <div className={styles['wp-left']}>
            <div className={styles['wp-left-Welcome']}></div>
            <div className={styles['copyright']}>版权所有:苏州环境云信息科技有限公司</div>
            <div className={styles['copyright']}>技术支持：苏州环境云信息科技有限公司&nbsp;&nbsp;&nbsp; 版本号：V1.0</div>
          </div>
          <div className={styles['wp-right']}>
            <div className={styles['login-title']}>用&nbsp;户&nbsp;登&nbsp;录</div>
            <Row className={styles['wp-login-input']}>
              <Col span={1}><Icon type="user" style={{color:'#60B0F2',fontSize:'18px'}}/> </Col>
              <Col offset={1} span={22}>
                <Input
                  className={styles['wp-login-user']}
                  placeholder="用户名"
                  value={t.state.user}
                  onChange={t.getUserInfo.bind(t, 'user')}/>
              </Col>
            </Row>
            <Row className={styles['wp-login-input']}>
              <Col span={1}><Icon type="lock" style={{color:'#60B0F2',fontSize:'18px'}}/> </Col>
              <Col offset={1} span={21}>
                <Input
                  type={t.state.inputType}
                  className={styles['wp-login-user']}
                  placeholder="密&nbsp;&nbsp;&nbsp;码"
                  onChange={t.getUserInfo.bind(t, 'pwd')}/>
              </Col>
              <Col span={1}><a><Icon type="eye-o" onClick={t.pwdShow.bind(t)} style={{color:'#60B0F2',fontSize:'18px'}}/></a> </Col>
            </Row>
            <Row className={styles['wp-login-foter']}>
              <Col span={9} className={styles['wp-login-code']}>
                <Col offset={1} span={2}><Icon type="safety" style={{color:'#60B0F2',fontSize:'18px'}}/> </Col>
                <Col offset={3} span={18}>
                  <Input
                    className={styles['wp-login-yanzheng']}
                    placeholder="验证码"
                    onChange={t.getUserInfo.bind(t, 'code')}/>
                </Col>
              </Col>
              <Col onClick={t.render.bind(t)} span={14}>
                <img style={{paddingLeft:'2vw',width:'80%',height:'35px'}} onClick={t.refreshCode.bind(t)} src={t.state.codeUrl}/>
              </Col>
            </Row>
            <Row>
              <Col span={12} className={styles['wp-login-foter']}>
                <Checkbox onChange={t.getUserInfo.bind(t, 'autoLogin')} style={{color:'#ccc'}}>自动登录</Checkbox>
              </Col>
            </Row>
            <div
              onClick={t.login.bind(t)}
              className={styles['wp-login-btn']}
            >
              登录
            </div>
          </div>
          {
            loading &&
            <div className={styles['wp-loading']}></div>
          }
        </div>
      </div>
    );
  }
}

function mapStateToProps (state) {
  return {
    nav:state
  };
}

export default connect(mapStateToProps)(Logo);


